<template>
	<div>
		<el-row>
			<el-col :span="24">
				<el-form :inline="true" size="small" :model="queryForm" ref="queryForm" class="demo-form-inline">
					<el-form-item label="商品名称:" prop="gname">
						<el-input v-model="queryForm.gname" placeholder="商品名称"></el-input>
					</el-form-item>
					<el-form-item label="商品型号:" prop="gmodel">
						<el-input v-model="queryForm.gmodel"></el-input>
					</el-form-item>
					<el-form-item label="颜色:" prop="gcolor">
						<el-select v-model="queryForm.gcolor" placeholder="请选择" clearable>
							<el-option v-for="dict in colorTypes" :key="dict.dicDataVal" :label="dict.dicDataLabel"
								:value="dict.dicDataVal" />
						</el-select>
					</el-form-item>
					<el-form-item label="商品品牌:" prop="gbrand">
						<el-select v-model="queryForm.gbrand" placeholder="请选择" clearable>
							<el-option v-for="(item,index ) in brandList" :key="index" :label="item.brandName"
								:value="item.brandName" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getSelectTableData()" size="mini" icon="el-icon-search" plain>
							搜索
						</el-button>
						<el-button icon="el-icon-refresh" @click="resetQueryForm()" size="mini" plain>重置</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-button type="primary" @click="addGoods1()" size="mini" icon="el-icon-folder-add" plain>
			创建一类商品
		</el-button>
		<el-button type="primary" @click="addGoods2()" size="mini" icon="el-icon-folder-add" plain>
			创建二类商品
		</el-button>

		<!--选择产品-->
		<el-dialog :visible.sync="selectFormVisible1" width="980px">
			<el-form :model="queryProductForm" size="small" ref="queryProductForm" :inline="true"
				class="demo-form-inline">
				<el-form-item label="存货档案编码:" prop="coding">
					<el-input v-model="queryProductForm.coding" style="width:100px"></el-input>
				</el-form-item>
				<el-form-item label="基础库-型号:" prop="model">
					<el-input v-model="queryProductForm.model" style="width:100px"></el-input>
				</el-form-item>
				<el-form-item label="基础库-颜色" prop="color">
					<el-select v-model="queryProductForm.color" placeholder="请选择" clearable style="width:100px">
						<el-option v-for="dict in colorTypes" :key="dict.dicDataVal" :label="dict.dicDataLabel"
							:value="dict.dicDataVal" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="listProducts()" size="mini" icon="el-icon-search" plain>搜索
					</el-button>
					<el-button icon="el-icon-refresh" @click="resetQueryProductForm()" size="mini" plain>重置
					</el-button>
				</el-form-item>
				<div>
					<el-table ref="productsTableData" :data="productsTableData" tooltip-effect="dark">
						<el-table-column prop="coding" label="存货档案编码"></el-table-column>
						<el-table-column prop="classify" label="基础库-分类"></el-table-column>
						<el-table-column prop="brand" label="基础库-品牌"></el-table-column>
						<el-table-column prop="model" label="基础库-型号"></el-table-column>
						<el-table-column prop="color" label="基础库-颜色"><template slot-scope="scope">
								<div v-for="dict in colorTypes" :key="dict.dicDataVal" :label="dict.dicDataLabel"
									:value="dict.dicDataVal">
									<div v-if="scope.row.color == dict.dicDataVal">
										{{dict.dicDataLabel}}
										</v-if>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="operate" label="操作">
							<template slot-scope="scope">
								<el-button type="success" icon="el-icon-circle-check"
									@click="setProductInfo(scope.$index, scope.row)" size="mini" plain>选择
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange2"
						:current-page="queryProductForm.pageNum" :page-sizes="[3, 5, 8,10]"
						:page-size="queryProductForm.pageSize" layout="->, total, sizes, prev, pager, next, jumper"
						:total="queryProductForm.totalNum1">
					</el-pagination>
				</div>
			</el-form>
		</el-dialog>

		<!--创建一类商品与二类商品-->
		<el-dialog :title="dialogTitle" :visible.sync="addFormVisible1" width="980px">
			<div v-show="isOneGoods">
				基础库产品信息：</Br>
				<el-button type="primary" size="mini" @click="showSelectProductDialog()" plain v-show="isQueryProduct">
					选择产品</el-button>
				<el-form :inline="true" size="small" :label-position="labelPosition" label-width="100px">
					<el-form-item label="档案编码:" prop="gcode">
						<el-input style="width:190px" size="mini" v-model="goodsForm.productCode" disabled>
						</el-input>
					</el-form-item>
					<el-form-item label="分类:" prop="gbrand">
						<el-input style="width:190px" size="mini" v-model="goodsForm.gbrand" disabled>
						</el-input>
					</el-form-item>
					<el-form-item label="采购模式:" prop="purchasingPattern">
						<el-input style="width:190px" size="mini" v-model="goodsForm.purchasingPattern" disabled>
						</el-input>
					</el-form-item>
					<el-form-item label="铺货:" prop="distribution">
						<el-input style="width:190px" size="mini" v-model="goodsForm.distribution" disabled>
						</el-input>
					</el-form-item>
					<el-form-item label="备机:" prop="standby">
						<el-input style="width:190px" size="mini" v-model="goodsForm.standby" disabled>
						</el-input>
					</el-form-item>
				</el-form>
				<el-divider></el-divider>
			</div>

			<div>
				商品信息：
				<el-form :inline="true" :model="goodsForm" ref="goodsForm" size="small" :label-position="labelPosition"
					label-width="100px">
					<el-form-item label="品牌:">
						<el-select style="width:190px" size="mini" v-model="goodsForm.gbrand" placeholder="品牌" clearable
							:disabled="isOneGoods">
							<el-option v-for="dict in brandList" :key="dict.id" :label="dict.brandName"
								:value="dict.brandName" />
						</el-select>
					</el-form-item>
					<el-form-item label="型号:">
						<el-input style="width:190px" size="mini" v-model="goodsForm.gmodel" :disabled="isOneGoods">
						</el-input>
					</el-form-item>
					<el-form-item label="颜色:">
						<el-select size="mini" v-model="goodsForm.gcolor" :disabled="isOneGoods">
							<el-option v-for="dict in colorTypes" :key="dict.dicDataVal" :label="dict.dicDataLabel"
								:value="dict.dicDataVal" />
						</el-select>
					</el-form-item>
					<el-form-item label="商品类型:" prop="gtype">
						<treeselect v-model="goodsForm.gtype" placeholder="商品类型" style="width:190px;" clearable
							:options="goodsTypeTree" :normalizer="normalizer" />
					</el-form-item>
					<el-form-item label="商品编码:">
						<el-input style="width:190px" size="mini" v-model="goodsForm.gcode" placeholder="请输入商品编码">
						</el-input>
					</el-form-item>
					<el-form-item label="商品名称:">
						<el-input style="width:190px" size="mini" v-model="goodsForm.gname" placeholder="请输入商品名称">
						</el-input>
					</el-form-item>
					<el-form-item label="采购价格:" prop="purchasePrice">
						<el-input style="width:190px" size="mini" v-model="goodsForm.purchasePrice"
							placeholder="请输入采购价">
						</el-input>
					</el-form-item>
					<el-form-item label="市场价格:" prop="marketPrice">
						<el-input style="width:190px" size="mini" v-model="goodsForm.marketPrice" placeholder="请输入市场价">
						</el-input>
					</el-form-item>
					<el-form-item label="商城价格:" prop="shopPrice">
						<el-input style="width:190px" size="mini" v-model="goodsForm.shopPrice" placeholder="请输入商城价">
						</el-input>
					</el-form-item>
					<el-form-item label="实际库存:" prop="stock">
						<el-input style="width:190px" size="mini" v-model="goodsForm.stock" placeholder="请输入库存">
						</el-input>
					</el-form-item>
					<el-form-item label="最低库存:" prop="stock">
						<el-input style="width:190px" size="mini" v-model="goodsForm.minStock" placeholder="请输入最低库存">
						</el-input>
					</el-form-item>
				</el-form>
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button @click="addFormVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="doSubmitGoodsForm()" v-show="isAddOrEdit">确定</el-button>
			</span>
		</el-dialog>

		<div>
			<el-table ref="tableData" :data="tableData" tooltip-effect="dark">
				<el-table-column type="index" width="50" :index="count">
				</el-table-column>
				<el-table-column prop="gcode" label="商品编码" min-width="105%" align="center"></el-table-column>
				<el-table-column prop="gname" label="商品名称" min-width="105%" align="center"></el-table-column>
				<el-table-column prop="goodsType.typeName" label="商品类型" min-width="40%" align="center">
				</el-table-column>
				<el-table-column prop="gbrand" label="商品品牌" min-width="65%" align="center"></el-table-column>
				<el-table-column prop="gmodel" label="商品型号" min-width="75%" align="center"></el-table-column>
				<el-table-column prop="gcolor" label="商品颜色" min-width="40%" align="center" :formatter="formatterColor">
				</el-table-column>
				<el-table-column prop="marketPrice" label="市场价格" min-width="40%" align="center">
				</el-table-column>
				<el-table-column prop="stock" label="库存" min-width="35%" align="center"></el-table-column>
				<el-table-column prop="operate" label="操作" min-width="105%" align="center">
					<template slot-scope="scope">
						<el-button type="warning" size="mini" @click="showGoodsDialog(scope.row)" plain>查看
						</el-button>
						<el-button size="mini" @click="showEditgoodsDialog(scope.row)" plain>编辑
						</el-button>
						<el-button type="danger" size="mini" @click="delGoods(scope.row)" plain>删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryForm.pageNum" :page-sizes="[3, 5, 8,10]" :page-size="queryForm.pageSize"
				layout="->, total, sizes, prev, pager, next, jumper" :total="queryForm.totalNum">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import {
		getDistinctBrand
	} from '@/api/gg/brand.js';
	import {
		getGoodsTypeTree
	} from '@/api/gg/goodsType.js';
	import {
		getProductById
	} from '@/api/gg/product.js'
	import Treeselect from '@riophae/vue-treeselect'
	import '@riophae/vue-treeselect/dist/vue-treeselect.css'
	export default {
		components: {
			Treeselect
		},
		data() {
			return {
				queryProductForm: { //产品查询表单
					coding: '',
					model: '',
					color: '',
					pageNum: 1,
					pageSize: 5,
					totalNum1: 5,
				},
				goodsForm: { //添加一类商品
					id: null,
					productCode:'',
					gcode: '',
					gname: '',
					gtype: null,
					purchasePrice: 0.0,
					marketPrice: 0.0,
					shopPrice: 0.0,
					stock: '',
					minStock: '',
					remark: '',
					productId: null,
					gbrand: '',
					gmodel: '',
					gcolor: '',

					classify: '',
					purchasingPattern: '',
					standby: '',
					distribution: '',
				},
				queryForm: { //查询
					gcolor: '',
					gname: '',
					gbrand: '',
					gmodel: '',
					pageNum: 1,
					pageSize: 5,
					totalNum: null, //总记录数
				},
				goodsTypeTree: [], //商品类别
				brandList: [], //商品品牌
				form: {},
				dialogTitle: '',
				isOneGoods: true,
				isAddOrEdit: true,
				isQueryProduct: true,
				productsTableData: [], //产品列表

				labelPosition: 'right',
				selectFormVisible1: false,
				editgoodsVisible: false,
				lookFormVisible: false,
				addFormVisible: false,
				addFormVisible1: false,

				color: [],
				tableData: [], //表单数据
				gsModelData: [], //商品分类
				modelData: [], //型号

				colorTypes: [], //颜色
				buyerTypes: [], //是否采购

				normalizer(node) {
					return {
						id: node.id,
						label: node.typeName,
						children: node.children,
					}
				},
			}
		},

		methods: {
			count(index) {
				return (this.queryForm.pageNum - 1) * this.queryForm.pageSize + index + 1;
			},
			//一类产品表中的操作-->选择
			setProductInfo(index, row) {
				this.selectFormVisible1 = false;
				this.goodsForm.productId = row.id;
				this.goodsForm.productCode = row.coding;
				this.goodsForm.gbrand = row.brand;
				this.goodsForm.gmodel = row.model;
				this.goodsForm.gcolor = row.color;
				this.goodsForm.classify = row.classify;
				this.goodsForm.purchasingPattern = row.purchasingPattern; //采购模式
				this.goodsForm.standby = row.standby; //备机
				this.goodsForm.distribution = row.distribution; //铺货
			},
			showSelectProductDialog() {
				this.selectFormVisible1 = true;
				this.resetQueryProductForm();
			},
			// 重置产品查询框
			resetQueryProductForm() {
				this.queryProductForm = {
					coding: '',
					model: '',
					color: '',
					pageNum: 1,
					pageSize: 5,
					totalNum1: 5,
				}
				this.productsTableData = [];
			},
			//点击创建一类商品的按钮触发
			addGoods1() {
				this.resetGoodsFrom();
				this.addFormVisible1 = true;
				this.dialogTitle = "添加一类商品";
				this.isOneGoods = true;
				this.isQueryProduct = true;
				this.isAddOrEdit = true;
			},
			//点击创建二类商品按钮触发
			addGoods2() {
				this.resetGoodsFrom();
				this.addFormVisible1 = true;
				this.dialogTitle = "添加二类商品";
				this.isOneGoods = false;
				this.isAddOrEdit = true;
			},
			//重置一类商品新增表单
			resetGoodsFrom() {
				this.goodsForm = {
					id: null,
					gcode: '',
					gname: '',
					gtype: null,
					purchasePrice: 0.0,
					marketPrice: 0.0,
					shopPrice: 0.0,
					stock: '',
					minStock: '',
					remark: '',
					productId: null,
					gbrand: '',
					gmodel: '',
					gcolor: '',

					classify: '',
					purchasingPattern: '',
					standby: '',
					distribution: '',
				}
			},
			doSubmitGoodsForm() {
				let id = this.goodsForm.id;
				if (id == null || id == '') {
					this.doAddGoods();
				} else {
					this.doUpdateGoods();
				}
				this.addFormVisible1 = false;
			},
			doAddGoods() {
				axios.post('/goods', this.goodsForm).then(resp => {
					if (resp.code == 20000) {
						this.suc("新增成功");
						this.getSelectTableData();
					} else {
						this.error(resp.msg)
					}
				});
			},
			doUpdateGoods() {
				axios.put('/goods', this.goodsForm).then(resp => {
					if (resp.code == 20000) {
						this.suc("修改成功");
						this.getSelectTableData();
					} else {
						this.error(resp.msg)
					}
				});
			},
			//编辑商品确定
			edistGoods() {
				this.editgoodsVisible = false;
				axios.put("/goods/updateGoods", this.editForm).then(resp => {
					if (resp.code == 20000) {
						this.$message.success(resp.msg);
					} else {
						this.$message.error("修改失败");
					}
					this.getSelectTableData();
				})
			},
			showEditgoodsDialog(row) {
				this.dialogTitle = "编辑商品信息";
				this.isAddOrEdit = true;
				this.isQueryProduct = false;
				this.goodsForm = JSON.parse(JSON.stringify(row));

				if (row.productId != null && row.productId != undefined && row.productId != '') {
					getProductById(row.productId).then(resp => {
						this.goodsForm.standby = resp.data.standby;
						this.goodsForm.purchasingPattern = resp.data.purchasingPattern;
						this.goodsForm.standby = resp.data.standby;
						this.goodsForm.distribution = resp.data.distribution;
						this.addFormVisible1 = true;
						this.isOneGoods = true;
					})
				} else {
					this.addFormVisible1 = true;
					this.isOneGoods = false;
				}
			},
			showGoodsDialog(row) {
				this.dialogTitle = "查看商品信息";
				this.isAddOrEdit = false;
				this.isQueryProduct = false;
				this.goodsForm = JSON.parse(JSON.stringify(row));

				if (row.productId != null && row.productId != undefined && row.productId != '') {
					getProductById(row.productId).then(resp => {
						this.goodsForm.standby = resp.data.standby;
						this.goodsForm.purchasingPattern = resp.data.purchasingPattern;
						this.goodsForm.standby = resp.data.standby;
						this.goodsForm.distribution = resp.data.distribution;
						this.addFormVisible1 = true;
						this.isOneGoods = true;
					})
				} else {
					this.addFormVisible1 = true;
					this.isOneGoods = false;
				}
			},
			delGoods(row) {
				this.$confirm(`此操作将永久删除编码为 ${row.gcode} 的数据,, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.delete(`goods/${row.id}`).then(resp => {
						this.suc("删除成功!")
						this.getSelectTableData();
					});
				})
			},
			resetQueryForm() {
				this.queryForm = {
					gcolor: '',
					gname: '',
					gbrand: '',
					gmodel: '',
					pageNum: 1,
					pageSize: 5,
					totalNum: 5, //总记录数
				};
				this.getSelectTableData();
			},
			handleSizeChange1(val) {
				this.queryProductForm.pageSize = val;
				this.queryProductForm.pageNum = 1;
				this.listProducts();
			},
			handleCurrentChange2(val) {
				this.queryProductForm.pageNum = val;
				this.listProducts();
			},
			handleSizeChange(val) {
				this.queryForm.pageSize = val;
				this.queryForm.pageNum = 1;
				this.getSelectTableData();
			},
			handleCurrentChange(val) {
				this.queryForm.pageNum = val;
				this.getSelectTableData();
			},
			//获取所有产品 用于选择一类商品
			listProducts() {
				axios.get("/product", {
					params: this.queryProductForm
				}).then(resp => {
					if (resp.code == 20000) {
						this.productsTableData = resp.data.list;
						this.queryProductForm.totalNum1 = resp.data.total;
					}
				})
			},
			getSelectTableData() {
				axios.get("/goods/select", {
					params: this.queryForm
				}).then(resp => {
					this.tableData = resp.list;
					this.queryForm.totalNum = resp.total;
				})
			},
			formatterColor(row, column, cellValue, index) {
				let d = this.parseDictValue(this.colorTypes, cellValue);
				if (d == null) return "-";
				return d.dicDataLabel;
			}
		},
		mounted() {
			getDistinctBrand().then(resp => {
				this.brandList = resp.data;
			});

			getGoodsTypeTree().then(resp => {
				this.goodsTypeTree = resp.data;
			});

			this.getDictItems("phone_color").then(resp => {
				this.colorTypes = resp.data;
			});

			this.getSelectTableData(); //查询所有并带条件
		}
	}
</script>
<style>
	.vue-treeselect {
		height: 28px;
	}

	.vue-treeselect .vue-treeselect__control {
		height: 28px !important;
	}

	.vue-treeselect__placeholder {
		line-height: 28px;
		font-size: 14px;
	}

	.el-form-item__content {
		line-height: normal;
	}

	.vue-treeselect input {
		font-size: 16px;
	}
</style>
